<template>
	<view class="content">
		<view class="head-place-posi">
			<view class="transparent"></view>
			<view class="Country-gy">
				<view class="Location-p" @click="show()"> 
					<text>{{cenlabel}}</text>
					<image :src="Edition.img" mode=""></image>
				</view>
				<text class="Country-text">{{country}}</text>
			</view> 
			<!-- 选择地区 -->
			<QuShe-picker ref="cityPicker" @confirm="confirm" @showQSPicker="showQSPicker" @hideQSPicker="hideQSPicker" type="city" title="请选择地区" ></QuShe-picker>
			<!-- 选择地区 -->
		</view>
		<view class="class-lsh">
			<view class="line-scenic" @click="xianlu">
				<view class="line-a">线路</view>
				<text>我的专属线路</text>
				<view class="line-b">GO ></view>
				<image src="../../static/images/scenic.png" mode=""/></image>
			</view>
			<view class="scenic-hotel">
				<view class="scenic-spot" @click="ticketnav">
					<view>门票</view>
					<text>只属于您的景点</text>
					<image src="../../static/images/ticket.png" mode=""/></image>
				</view>
				<view class="hotel-spot" @click="hotelindex">
					<view>酒店</view>
					<text>舒适、安全、安心</text>
					<image src="../../static/images/hotel.png" mode=""/></image>
				</view>
			</view>
		</view>
		
		<!-- 贵阳线路 -->
		<view>
			<view class="gy-titele">
				<view>{{listtitle.current}}</view>
				<view class="gy-circular"></view>
				<view @click="ad">线路</view>
			</view>
			<view class="line-ul">
				<view class="line-list" @click="linenav" v-for="(line,index) in linelist" :key="index">
					<image :src="line.img" class="jiaxl-img"/></image>
					<view class="Price-bt">
						<text>{{line.telet}}</text>
						<view class="Trip-jt">
							<view class="Praise-lv">{{line.tapone}}</view>
							<view class="Trip-dd">销量：{{line.satis}}</view>
						</view>
						<view class="Trip-jt">
							<view class="Praise-lv">{{line.taptwo}}</view>
							<view class="Trip-dd">好评率{{line.fied}}</view>
						</view>
						<view class="Price-jg">
							<view><span class="Price-jg-span">￥</span><span>{{line.money}}</span></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 特惠门票 -->
		<view>
			<view class="gy-titele">
				<view>{{listtitle.Preferential}}</view>
				<view class="gy-circular"></view>
				<view>门票</view>
			</view>
			<view class="line-ul">
				<view class="line-list" @click="asfasfa" v-for="(ticke,index) in ticketlist" :key="index">
					<image :src="ticke.img" class="jiaxl-img"/></image>
					<view class="Price-bt">
						<text>{{ticke.telet}}</text>
						<view class="Trip-jt">
							<view class="Praise-lv">{{ticke.tapone}}</view>
							<view class="Trip-dd">销量：{{ticke.satis}}</view>
						</view>
						<view class="Trip-jt">
							<view class="Praise-lv">{{ticke.taptwo}}</view>
							<!-- <view class="Trip-dd">好评率{{ticke.fied}}</view> -->
						</view>
						<view class="Price-jg">
							<view><span class="Price-jg-span">￥</span><span>{{ticke.money}}</span></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 酒店列表 -->
		<view>
			<view class="gy-titele">
				<view>{{listtitle.Offer}}</view>
				<view class="gy-circular"></view>
				<view>酒店</view>
			</view>
			<view class="Price-list-ul"> 
				<view class="Price-list-li" v-for="(hotel,index) in hotellist" :key="index" @click="hotelnav">
					<image :src="hotel.img" class="Room-img"/></image>
					<view class="room-money">
						<view class="room-titeli">{{hotel.telet}}</view>
						<view class="room-p">
							<text class="room-pgood">满意度{{hotel.fied}}</text>
							<text class="room-volume">销量：{{hotel.satis}}</text>
						</view>
						<view class="room-distance">{{hotel.distance}}</view>
						<view class="Label-tt">
							<view class="Label-btn01">{{hotel.btnone}}</view>
							<view class="Label-btn02">{{hotel.btntwo}}</view>
						</view>
						<view class="Price-money">
							<view class="Price-money-a">￥</view>
							<view class="Price-money-b">{{hotel.money}}</view>
							<view class="Price-money-a">起</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
	
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import QuShePicker from "@/components/QuShe-picker/QuShe-picker.vue"
	var _self,
	page = 1,
	timer = null;
	export default {
		components: {
			 uniLoadMore,
			 QuShePicker
		},
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url: './search' 
			});
		},
		data() {
			return{
				isshow: true,
				cenlabel:' ',
				country:' ',
				defaultValue: [1, 0, 0], //初始数据
				linkageNum: 3, //3 表示为3级联动
				linkage: true, //true 表示开启联动
				Edition:{
					img:'../../static/images/Location.png'
				},
				listtitle:{
					current:'贵阳',
					Preferential:'特惠',
					Offer:'特价'
				},
				newsList: [],
				loadingText: '加载中...',
				loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
					contentdown:'上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				linelist:[
					{
						telet:'九寨沟+黄龙+卧龙熊猫谷+都江堰双气4人游',
						img:'../../static/images/tianli.jpg',
						fied:'90%',
						satis:'999+',
						tapone:'贵阳出发',
						taptwo:'三天两夜',
						money:'1580.00'
					},
					{
						telet:'九寨沟+黄龙+卧龙熊猫谷+都江堰双气4人游',
						img:'../../static/images/tianli.jpg',
						fied:'90%',
						satis:'999+',
						tapone:'贵阳出发',
						taptwo:'三天两夜',
						money:'1580.00'
					}
				],
				ticketlist:[
					{
						telet:'九寨沟+黄龙+卧龙熊猫谷+都江堰双气4人游',
						img:'../../static/images/jiaxl.jpg',
						fied:'90%',
						satis:'999+',
						tapone:'人气TOP1',
						taptwo:'黔南第一山',
						money:'1580.00'
					},
					{
						telet:'九寨沟+黄龙+卧龙熊猫谷+都江堰双气4人游',
						img:'../../static/images/jiaxl.jpg',
						fied:'90%',
						satis:'999+',
						tapone:'人气TOP1',
						taptwo:'黔南第一山',
						money:'1580.00'
					}
				],
				hotellist:[
					{
						telet:'观云旅业海峡阳光大酒店（林城西路店）',
						img:'../../static/images/hohlejd.jpg',
						fied:'90%',
						satis:'999+',
						distance:'距您直线1km，靠近美乐城',
						btnone:'天天特惠',
						btntwo:'免费取消',
						money:'158'
					}
				]
			}
		},
		onLoad(){
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				geocode:true,
				success: function (res){
					console.log('res定位 = '+JSON.stringify(res))
					console.log('省份：' + res.address.province);
					console.log('市区：' + res.address.city);
					that.cenlabel = res.address.city;
					that.country = res.address.province;
					console.log(that.automaticpoe);
				}
			});
			
			// 下拉和上拉
			 _self = this;
			//页面一加载时请求一次数据
			this.getnewsList();
		},
		onPullDownRefresh: function() {
					//下拉刷新的时候请求一次数据
			this.getnewsList();
		},
		onReachBottom: function() {
			// 暂时请求一次方法
			this.getnewsList(); 
				//触底的时候请求数据，即为上拉加载更多
				//为了更加清楚的看到效果，添加了定时器
			// if (timer != null) {
			// 	clearTimeout(timer);
			// }
			// timer = setTimeout(function() {
			// 	_self.getmorenews();
			// }, 1000);
					
					// 正常应为:
					// _self.getmorenews();
		},
		methods:{
			// 定位地区
			show(){
			  this.$refs.cityPicker.show();
			},
			showQSPicker(){
			  console.log(123);
			},
			hideQSPicker(){
			  console.log(234);
			},
			confirm(type){
			  console.log(type);
			  this.country = type.data.label[0];
			  this.cenlabel = type.data.label[1]=="市辖区"?type.data.label[0]:type.data.label[1];
			  console.log(this.cenlabel);
			},
			asfasfa(){
				uni.navigateTo({
					url:"../ticket/ticket-details"
				})
			},
			xianlu(){
				uni.navigateTo({
					url:'../line/line-list'
				})
			},
			hotelnav(){
				uni.navigateTo({
					url:'../hotel/hotel-dateils'
				})
			},
			linenav(){
				uni.navigateTo({
					url:'../line/line-dateils'
				})
			},
			ticketnav(){
				uni.navigateTo({
					url:'../ticket/ticket'
				})
			},
			hotelindex(){
				uni.navigateTo({
					url:'../hotel/hotel-search'
				})
			},
			
			// 上拉加载
			 getmorenews: function() {
				if (_self.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				_self.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=' + page,
					method: 'GET',
					success: function(res) {
						console.log(JSON.stringify(res));
						if (res.data == null) {//没有数据
							_self.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						page++;//每触底一次 page +1
						_self.newsList = _self.newsList.concat(res.data.split('--hcSplitor--'));//将数据拼接在一起
						_self.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					}
				});
			},
			getnewsList: function() {//第一次回去数据
			console.log(123)
				// page = 1;
				// this.loadingType = 0;
				// uni.showNavigationBarLoading();
				// uni.request({
				// 	url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1',
				// 	method: 'GET',
				// 	success: function(res) {
				// 		page++;//得到数据之后page+1
				// 		_self.newsList = res.data.split('--hcSplitor--');
				// 		uni.hideNavigationBarLoading();
				// 		uni.stopPullDownRefresh();//得到数据后停止下拉刷新
				// 	}
				// });
			}
}
		
	};

	
</script>

<style>
	@import url("../../components/index/index.css");
	.iconred {
        color: #ff4800;
        font-size: 36upx;
    }
    .iconblue {
        color: #b1b1b1;
        font-size: 36upx;
    }

</style>
